<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>豆瓣</title>
    <link
      rel="shortcut icon"
      href="../images/favicon.ico"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/douban.css" />
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_1319847_2wikfefw2bt.css"
    />
  </head>
  <body>
   <div class="contanier">
        <header class="header width950 clearfix">
                <div class="logo">
                  <a href="douban.html"><span></span></a>
                </div>
                <div class="search">
                  <div class="input">
                    <input type="text" placeholder="书籍、电影、音乐、小组、小站、成员" />
                    <div class="searchbtn">
                      <i class=" iconfont icon-xiaoxi-"></i>
                    </div>
                  </div>
                </div>
                <div class="nav">
                  <ul>
                    <li><a href="" class="lnk-book">读书</a></li>
                    <li><a href="" class="lnk-movie">电影</a></li>
                    <li><a href="" class="lnk-music">音乐</a></li>
                    <li><a href="" class="lnk-group">小组</a></li>
                    <li><a href="" class="lnk-city">同城</a></li>
                    <li><a href="" class="lnk-FM">FM</a></li>
                    <li><a href="" class="lnk-time">时间</a></li>
                    <li><a href="" class="lnk-bean">品豆</a></li>
                  </ul>
                </div>
              </header>
   </div>
    <!-- ad部分 -->
    <div class="ad">
      <div class="wrapper width950">
        <div class="logindiv">
          <div class="logintop">
            <ul class="clearfix">
              <li class="liactive">短信登录/注册</li>
              <li>密码登录</li>
            </ul>
          </div>
          <div class="notice">
            <span>登录注册表示同意 <a href="">豆瓣使用协议、隐私政策</a> </span>
          </div>
          <div class="formphone">
            <div class="phone">
              <span>+86</span>
              <span class="titleheader">|</span>
              <input type="text" placeholder="手机号" />
            </div>
            <div class="phone">
              <input type="text" placeholder="验证码" />
              <a href="">获取验证码</a>
            </div>
            <div>
              <button>登录豆瓣</button>
            </div>
            <div class="protocol">
              <input type="checkbox" name="" id="" />
              <span>下次自动登录</span>
              <a href="">收不到验证码</a>
            </div>
            <div class="loginbottom">
              <span>第三方登录:</span>
              <i class="iconfont icon-wechat1193418easyiconnet"
                ><a href=""></a
              ></i>
              <i class="iconfont icon-webo"><a href=""></a></i>
            </div>
          </div>
        </div>
        <div class="appnew">
          <div><span>豆瓣 6.0</span></div>
          <div>
            <a class="btn">下载豆瓣APP</a>
            <a href=""
              ><i class="iconfont icon-erweima">
                <div class="qrcode">
                  <div>
                    <img src="../images/doubanapp_qrcode.png" alt="" />
                  </div>
                  <div
                    style="font-size: 10px; text-align:center;line-height:15px; color: gray"
                  >
                    iOS / Android 扫码直接下载
                  </div>
                </div>
              </i></a
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 热点部分 -->
    <div class="section">
            <div class="hot clearfix width950">
        
                    <div class="right">
                            <div class="img">
                              <img
                                src="https://img1.doubanio.com/view/dale-online/dale_ad/public/cc80d88278077d9.jpg"
                                alt=""
                              />
                            </div>
                            <div class="topic">
                              <span class="title">热门话题 </span>
                              <span class="titlelink"><a href="">去话题广场</a></span>
                            </div>
                            <div class="topic-item">
                              <a href="">你买下的第一张实体专辑</a>
                              <div class="topic-desc">215308人浏览</div>
                            </div>
                            <div class="topic-item">
                              <a href="">你买下的第一张实体专辑</a>
                              <div class="topic-desc">215308人浏览</div>
                            </div>
                            <div class="topic-item">
                              <a href="">你买下的第一张实体专辑</a>
                              <div class="topic-desc">215308人浏览</div>
                            </div>
                            <div class="topic-item">
                              <a href="">你买下的第一张实体专辑</a>
                              <div class="topic-desc">215308人浏览</div>
                            </div>
                            <div class="topic-item">
                              <a href="">你买下的第一张实体专辑</a>
                              <div class="topic-desc">215308人浏览</div>
                            </div>
                            <div class="topic-item">
                              <a href="">你买下的第一张实体专辑</a>
                              <div class="topic-desc">215308人浏览</div>
                            </div>
                            <div class="topic-item">
                              <a href="">你买下的第一张实体专辑</a>
                              <div class="topic-desc">215308人浏览</div>
                            </div>
                          </div>
                   <div class="main "> 
                      <div class="main-top">
                            <span class="title">热点内容 </span>
                            <span class="titlelink"><a href="">更多</a></span>
                      </div>
                      <div class="main-content ">
                            <div class="main-left">
            
                                 <ul> 
                                    <li>
                                        <div><a href=""><img src="https://img3.doubanio.com/view/photo/albumcover/public/p2560038003.webp" alt=""></a></div>
                                        <div><a href="" style="    color: #37a;font-size: 10px">
                                            711泡泡
                                        </a><span style="color: gray;font-size:10px;">
                                                44张照片
                                        </span></div>
                                    </li>
                                    <li>
                                        <div><a href=""><img src="https://img3.doubanio.com/view/photo/albumcover/public/p2560038003.webp" alt=""></a></div>
                                        <div><a href="" style="    color: #37a;font-size: 10px">
                                            711泡泡
                                        </a><span style="color: gray;font-size:10px;">
                                                44张照片
                                        </span></div>
                                    </li>
                                    <li>
                                        <div><a href=""><img src="https://img3.doubanio.com/view/photo/albumcover/public/p2560038003.webp" alt=""></a></div>
                                        <div><a href="" style="    color: #37a;font-size: 10px">
                                            711泡泡
                                        </a><span style="color: gray;font-size:10px;">
                                                44张照片
                                        </span></div>
                                    </li>
                                    <li>
                                        <div><a href=""><img src="https://img3.doubanio.com/view/photo/albumcover/public/p2560038003.webp" alt=""></a></div>
                                        <div><a href="" style="    color: #37a;font-size: 10px">
                                            711泡泡
                                        </a><span style="color: gray;font-size:10px;">
                                                44张照片
                                        </span></div>
                                    </li>
                                  
                                    
                                </ul> 
                            </div>
                            <div class="main-right">
                                <div>
                                    <a href="" class="commonA">步行与漫游</a>
                                    <div><span  class="commonSpan">花椰菜的日记</span></div>
                                    <div class="commonText">很喜欢走路，无数次的漫游和观察便也是始于步行。 走得多了，就很清楚地了解自己的...</div>
                                </div>
                                <div><a href="" class="commonA">学会这一招，从此告别旅馆和帐篷 | 远夏独家睡车指南</a></div>
                                <div><a href="" class="commonA">学会这一招，从此告别旅馆和帐篷 | 远夏独家睡车指南</a></div>
                                <div><a href="" class="commonA">学会这一招，从此告别旅馆和帐篷 | 远夏独家睡车指南</a></div>
                                <div><a href="" class="commonA">学会这一招，从此告别旅馆和帐篷 | 远夏独家睡车指南</a></div>
                                <div><a href="" class="commonA">学会这一招，从此告别旅馆和帐篷 | 远夏独家睡车指南</a></div>
                                <div><a href="" class="commonA">学会这一招，从此告别旅馆和帐篷 | 远夏独家睡车指南</a></div>
                               <div><a href="" class="commonA">学会这一招，从此告别旅馆和帐篷 | 远夏独家睡车指南</a></div>
                                <div><a href="" class="commonA">学会这一招，从此告别旅馆和帐篷 | 远夏独家睡车指南</a></div>
                            </div>
                      </div>
                  </div> 
                  
                </div>
    </div>
    <!--豆瓣时间  -->
    <div class="section">
        <div class="time clearfix width950">
            <div class="left">
                <a href="">豆瓣时间</a>
            </div>
            <div class="time-main">
                <div class="time-main-top">
                        <span class="title">热门专栏 </span>
                        <span class="titlelink"><a href="">更多</a></span>
                </div>
                <div>
                    <ul>
                        <li>
                                <div class="time-main-context">
                   
                                        <div>
                                                <img src="https://img3.doubanio.com/dae/niffler/niffler/images/6f488990-a773-11e9-b587-0242ac110011.jpg" alt="">
                                            </div>
                                            <div>
                                                <a href="" class="commonA">听！解说式音乐会——古典音乐聆听指南</a>
                                            </div>
                                            <div>
                                                <span class="commonText">视频专栏</span>
                                            </div>
                            
                        </div>
                        </li>
                        <li>
                                <div class="time-main-context">
                   
                                        <div>
                                                <img src="https://img3.doubanio.com/dae/niffler/niffler/images/6f488990-a773-11e9-b587-0242ac110011.jpg" alt="">
                                            </div>
                                            <div>
                                                <a href="" class="commonA">听！解说式音乐会——古典音乐聆听指南</a>
                                            </div>
                                            <div>
                                                <span class="commonText">视频专栏</span>
                                            </div>
                            
                        </div>
                        </li>
                        <li>
                                <div class="time-main-context">
                   
                                        <div>
                                                <img src="https://img3.doubanio.com/dae/niffler/niffler/images/6f488990-a773-11e9-b587-0242ac110011.jpg" alt="">
                                            </div>
                                            <div>
                                                <a href="" class="commonA">听！解说式音乐会——古典音乐聆听指南</a>
                                            </div>
                                            <div>
                                                <span class="commonText">视频专栏</span>
                                            </div>
                            
                        </div>
                        </li>
                        <li>
                                <div class="time-main-context">
                   
                                        <div>
                                                <img src="https://img3.doubanio.com/dae/niffler/niffler/images/6f488990-a773-11e9-b587-0242ac110011.jpg" alt="">
                                            </div>
                                            <div>
                                                <a href="" class="commonA">听！解说式音乐会——古典音乐聆听指南</a>
                                            </div>
                                            <div>
                                                <span class="commonText">视频专栏</span>
                                            </div>
                            
                        </div>
                        </li>
                        <li>
                                <div class="time-main-context">
                   
                                        <div>
                                                <img src="https://img3.doubanio.com/dae/niffler/niffler/images/6f488990-a773-11e9-b587-0242ac110011.jpg" alt="">
                                            </div>
                                            <div>
                                                <a href="" class="commonA">听！解说式音乐会——古典音乐聆听指南</a>
                                            </div>
                                            <div>
                                                <span class="commonText">视频专栏</span>
                                            </div>
                            
                        </div>
                        </li>
                        <li>
                                <div class="time-main-context">
                   
                                        <div>
                                                <img src="https://img3.doubanio.com/dae/niffler/niffler/images/6f488990-a773-11e9-b587-0242ac110011.jpg" alt="">
                                            </div>
                                            <div>
                                                <a href="" class="commonA">听！解说式音乐会——古典音乐聆听指南</a>
                                            </div>
                                            <div>
                                                <span class="commonText">视频专栏</span>
                                            </div>
                            
                        </div>
                        </li>
                        <li>
                                <div class="time-main-context">
                   
                                        <div>
                                                <img src="https://img3.doubanio.com/dae/niffler/niffler/images/6f488990-a773-11e9-b587-0242ac110011.jpg" alt="">
                                            </div>
                                            <div>
                                                <a href="" class="commonA">听！解说式音乐会——古典音乐聆听指南</a>
                                            </div>
                                            <div>
                                                <span class="commonText">视频专栏</span>
                                            </div>
                            
                        </div>
                        </li>
                        <li>
                                <div class="time-main-context">
                   
                                        <div>
                                                <img src="https://img3.doubanio.com/dae/niffler/niffler/images/6f488990-a773-11e9-b587-0242ac110011.jpg" alt="">
                                            </div>
                                            <div>
                                                <a href="" class="commonA">听！解说式音乐会——古典音乐聆听指南</a>
                                            </div>
                                            <div>
                                                <span class="commonText">视频专栏</span>
                                            </div>
                            
                        </div>
                        </li>
                        <li>
                                <div class="time-main-context">
                   
                                        <div>
                                                <img src="https://img3.doubanio.com/dae/niffler/niffler/images/6f488990-a773-11e9-b587-0242ac110011.jpg" alt="">
                                            </div>
                                            <div>
                                                <a href="" class="commonA">听！解说式音乐会——古典音乐聆听指南</a>
                                            </div>
                                            <div>
                                                <span class="commonText">视频专栏</span>
                                            </div>
                            
                        </div>
                        </li>
                        <li>
                                <div class="time-main-context">
                   
                                        <div>
                                                <img src="https://img3.doubanio.com/dae/niffler/niffler/images/6f488990-a773-11e9-b587-0242ac110011.jpg" alt="">
                                            </div>
                                            <div>
                                                <a href="" class="commonA">听！解说式音乐会——古典音乐聆听指南</a>
                                            </div>
                                            <div>
                                                <span class="commonText">视频专栏</span>
                                            </div>
                            
                        </div>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <!-- 视频 -->
    <div class="section">
        <div class="video clearfix width950">
            <div class="video-left">
                <a href="">视频</a>
            </div>
            <div class="video-main">
                <div class="video-main-top">
                        <span class="title">瓣嘴 </span>
                </div>
                <div class="video-main-content">
                    <ul>
                        <li>
                            <div>
                                <a href="" class="videoarea"></a>
                                <div>
                                   <a href="" class="commonA">
                                        马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语
                                   </a>
                                </div>
                            </div>
                        </li>
                        <li>
                                <div>
                                    <a href="" class="videoarea"></a>
                                    <div>
                                       <a href="" class="commonA">
                                            马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语
                                       </a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                    <div>
                                        <a href="" class="videoarea"></a>
                                        <div>
                                           <a href="" class="commonA">
                                                马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语
                                           </a>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                        <div>
                                            <a href="" class="videoarea"></a>
                                            <div>
                                               <a href="" class="commonA">
                                                    马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语
                                               </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                            <div>
                                                <a href="" class="videoarea"></a>
                                                <div>
                                                   <a href="" class="commonA">
                                                        马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语
                                                   </a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                                <div>
                                                    <a href="" class="videoarea"></a>
                                                    <div>
                                                       <a href="" class="commonA">
                                                            马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语
                                                       </a>
                                                    </div>
                                                </div>
                                            </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <div class="footer width950 clearfix">
        <div class="left">
            <p>
                    © 2005－2019 douban.com, all rights reserved 北京豆网科技有限公司 
            </p>
            <p>
                    <a href="">京ICP证090015号</a> 京ICP备11027288号 网络视听许可证<a href="">0110418</a>号
            </p>
            <p>
                    京网文[2015]2026-368号  京公网安备<a href="">11010502000728</a>  新出网证(京)字129号
            </p>
            <p>
                    违法和不良信息举报电话：4008353331-9 
            </p>
            <p>
                    <img src="https://img3.doubanio.com/pics/icon/jubao.png" align="absmiddle" width="15px">
                    中国互联网举报中心 电话：12377 新出发京批字第直160029号
            </p>
        </div>
        <div class="right">
            <a href="">关于豆瓣</a>
            <a href="">在豆瓣工作</a>
            <a href="">联系我们</a>
            <a href="">法律声明</a>
            <a href="">帮助中心</a>
            <a href="">移动应用</a>
            <a href="">豆瓣广告</a>
            <div class="img">
                    <img src="https://img3.doubanio.com/img/files/file-1489464722.jpg" alt="网上有害信息举报专区">
            </div>
        </div>
    </div>
  </body>
</html>
